<template>
  <div :style="isShow ? { paddingTop: '60px' } : {}">
    <Navbar v-if="isShow" style="height: 60px; z-index: 100; position: fixed; width: 100%; top: 0;"></Navbar>
    <router-view />
    <Tail v-if="isShow"></Tail>
  </div>
</template>
<script>
import Navbar from "@/components/Navbar";
import Tail from "@/components/Tail.vue";
export default {
  components: { Navbar, Tail },
  data() {
    return {
      isShow: true,
    };
  },
  // 添加侦听器
  watch: {
    // 侦听路由
    $route: {
      // 使用高级侦听
      handler(cur, pre) {
        // 控制头部导航栏显示，账号部分
        let account = [
          "/account/ship-to-address", "/account/personal-data",
          "/account/order", "/account/logistics", "/account/shopping",
          "/account/personal-update", "/account/logistics-update"
        ];
        // 头部导航栏显示和隐藏
        let whiteList = ["/about", "/account", "/mylogin", ...account];
        let path = cur.path;
        if (whiteList.indexOf(path) > -1) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      },
      // 立即执行 handler
      immediate: true,
      // 深度检测，检查数组或对象的某个对象属性发生改变执行 handler
      deep: true,
    },
  },
};
</script>
<style lang="scss">
* {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
  direction: none;
}
img,
video {
  display: block;
}
</style>
